<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<style>
		.inner{
			height:150px ;
			background-color:darkcyan ;
		}
	</style>
	
	<body>
		<div id="app">
			<h4>.stop:阻止冒泡</h4>
			<div class="inner" @click="div1Handler">
				<!--.stop:阻止冒泡-->
				<input type="button" value="点击" @click.stop="btnHandler" />
			</div>
			
			<h4>.prevent:阻止默认事件发生</h4>
			<a href="http://www.baidu.com" @click.prevent="initHander">有问题，先百度</a>
			<br/>
			
			<h4>.capture:从外往内捕获触发事件</h4>
			<div class="inner" @click.capture="div1Handler">				
				<input type="button" value="点击" @click="btnHandler" />
			</div>
			<br />
			
			<h4>.self:只有点击当前元素时才会触发该事件</h4>
			<div class="inner" @click.self="div1Handler">				
				<input type="button" value="点击" @click="btnHandler" />
			</div>
			
			<h4>.once:事件只触发一次事件处理函数</h4>
			<a href="http://www.baidu.com" @click.prevent.once="initHander">有问题，先百度</a>
			
		</div>
	</body>
	<script>
		var vue=new Vue({
			el:"#app",
			data:{
				
			},
			methods:{
				div1Handler(){
					console.log("div被点击的事件");					
				},
				btnHandler(){
					console.log("button被点击的事件");
				},
				initHander(){
					console.log("阻止默认事件被点击的事件");
				}
			}
		});
	</script>
</html>